<template>
  <div class="config">
    <ul class="configList pnx">
      <li class="item flex-row items-center">
        <div class="item-label">桌面背景</div>
        <div class="item-content flex-row flex-auto items-center">
          <el-input border v-model="desktopImg" class="w-fill"/>
          <vs-button  color="warning" size="mini" @click="handleSetImg">更换</vs-button>
        </div>
      </li>
      <li class="item flex-row items-center">
        <div class="item-label">颜色风格</div>
        <div class="item-content">
          <vs-switch  v-model="colorType" val="win7" not-value="win10">
            <template #on>
              Windows10
            </template>
            <template #off>
              Windows7
            </template>
          </vs-switch>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "ConfigSysConfig",
  data: () => ({
    desktopImg: "",
    colorType: true
  }),
  created() {
    this.desktopImg = this.$store.state.config.desktopImg
  },
  watch:{
    colorType(value){
      if(!value){
        this.$msg.info("win7风格正在紧急上线中...", {title: "提示"})
      }
    }
  },
  methods:{
    handleSetImg() {
      this.$store.commit("setConfig", {field: "desktopImg", value: this.desktopImg})
    }
  }


}
</script>

<style scoped lang="scss">
@import "~@/assets/css/var";

.config {

}

.configList {
  .item {
    margin-bottom: $mn;
    height: 50px;
    background-color: sandybrown;
    .item-label{
      color: white;
      width: 100px;
      text-align: center;
    }
  }
}
</style>
